<template>
    <div class="wrapper">
        <div class="header">
            <div class="a">
                <LabelTitle title="基本信息" />
                <el-form-item :class="item.type === 'textarea' ? 'textarea' : '' "
                    :label-width="item.type === 'textarea' ? '260px' : '130px'" v-for="item in baseFormList"
                    :key="item.label" :label="item.label">
                    <el-input :placeholder="'请输入' + item.label" :type="item.type ?item.type : 'text' "
                        v-model="baseForm[item.value]" />
                </el-form-item>
                <el-form-item label="企业类型" label-width="130px">
                    <el-input value="供应商" disabled />
                </el-form-item>
                <el-divider border-style="dashed" />

                <el-form-item :class="item.type === 'textarea' ? 'textarea' : '' "
                    :label-width="item.type === 'textarea' ? '260px' : '130px'" v-for="item in textareaFormList"
                    :key="item.label" :label="item.label">
                    <el-input :placeholder="'请输入' + item.label" :type="item.type ?item.type : 'text' "
                        v-model="baseForm[item.value]" />
                </el-form-item>
            </div>
            <div class="b">
                <LabelTitle title="企业资质" />
                <div class="container">
                    <el-form-item class="b-item" label-width="130px" v-for="item in certificateMessageFormList"
                        :key="item.label" :label="item.label">
                        <el-input :disabled="item.disabled" v-model="item.value" />
                        <el-upload class="upload-demo" :name="item.name" :action="item.action" :show-file-list="false"
                            :on-change="item.onSuccess">
                            <el-button type="primary">上传</el-button>
                        </el-upload>
                    </el-form-item>
                </div>

            </div>
        </div>
        <div class="footer">
            <el-button type="primary" @click="handleRegistration">注册</el-button>
            <el-button @click="router.back()">返回</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import LabelTitle from "../../../../components/LabelTitle/index.vue";
import FormItem from "./component/FormItem.vue";
import { baseForm, baseFormList, textareaFormList, certificateMessageFormList } from "./formList";
import { ElMessage, UploadProps, UploadUserFile } from 'element-plus'
import { establishmentRegistrationApi } from "../../../../api/user";
import { checkArrayPropEmpty, checkPropEmpty } from "../../../../utils";
import { useRouter } from "vue-router";
const router = useRouter();


const handleRegistration = async () => {
    if (!checkPropEmpty({
        ...baseForm,
    }, undefined)) {
        ElMessage({
            message: "基础信息填写不完整",
            type: "warning",
        });
        return;
    }
    if (!checkArrayPropEmpty(certificateMessageFormList)) {
        ElMessage({
            message: "企业资质填写不完整",
            type: "warning",
        });
        return;
    }
    const certificateMessage = {};
    certificateMessageFormList.forEach(it => {
        certificateMessage[it.attr] = it.value;
    })
    const postData = {
        ...baseForm,
        certificateMessage
    }
    const { code, msg, data } = await establishmentRegistrationApi(postData);
    if (code === 200) {
        ElMessage({
            message: "注册成功",
            type: "success",
            onClose() {
                location.reload();
            }
        })

    } else {
        ElMessage({
            message: msg,
            type: "warning"
        })
    }

}


</script>

<style lang="less" scoped>
.header {
    width: 100%;
    box-sizing: border-box;

    .a {
        .el-form-item /deep/ {
            width: 50%;
            display: inline-flex;
        }

        .textarea {
            width: 100%;
        }
    }

    .b {
        &>.container {
            padding: 50px 10vw;
            box-shadow: 0 0 3px rgba(0, 0, 0, .3);
        }

        /deep/ .el-form-item__content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /deep/.el-input {
            width: 80%;
            margin-right: 10px;
        }

        .upload-demo {
            flex: 1;
            display: flex;
            align-items: center;

            /deep/ .el-upload {
                width: 100%;

            }
        }

    }
}

.footer {
    padding: 0 5vw;
    display: flex;
    margin-top: 5vh;
}
</style>